<!--  -->
<template>
  <div class="BankCardBinding">
    <header><Headerss title="银行卡绑定" /></header>
    <main>
      <div class="top">请输入您的银行卡信息</div>
      <div class="box">
        <van-form @submit="onSubmit">
          <van-field
            v-model="bank"
            name="bank"
            label="开户行"
            placeholder="请输入开户行"
            :rules="[{ required: true, message: '请填写开户行' }]"
          />
          <van-field
            v-model="username"
            name="用户名"
            label="持卡人"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="id"
            type="id"
            name="id"
            label="身份证"
            placeholder="请输入身份证号码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="youxiaoqi"
            type="youxiaoqi"
            name="身份证有效期"
            label="身份证有效期"
            placeholder="请输入身份证有效期"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="num"
            type="num"
            name="num"
            label="银行卡号"
            placeholder="请输入银行卡号"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="phone"
            type="phone"
            name="phone"
            label="手机号"
            placeholder="请输入银行预留手机号"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px; ">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              style="background: #484A71; border-color:#484A71;"
              >下一步</van-button
            >
          </div>
        </van-form>
      </div>
      <!-- {{ List }} -->
    </main>
  </div>
</template>

<script>
import Headerss from "../../components/Headerss";
import { mapState, mapMutations } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Headerss,
  },
  data() {
    //这里存放数据
    return {
      value: "", //内容
      pattern: /^[\u4e00-\u9fa5]{0,9}$/,
      patterns: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
      patternss: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
      show: false,
      username: "",
      id: "", //身份证.唯一标识符
      password: "",
      youxiaoqi: "",
      num: "", //银行卡
      phone: "", //手机号
      bank: "",
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState("data", ["List"]),
  },

  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    ...mapMutations("data", ["setList", "updateIfShow"]),
    onSubmit(values) {
      this.setList(values);
      console.log(values, "values");
      this.$router.push("/verificationCodes");
      this.updateIfShow(false);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
};
</script>
<style lang="scss" scoped>
@import "@css/style.scss";
.BankCardBinding {
  width: 100%;
  height: 100%;
}
main {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  .top {
    width: 100%;
    height: px2rem(50);
    line-height: px2rem(50);
    background: #eee;
    border-top: 5px solid #fff;
    font-size: px2rem(16);
    padding-left: px2rem(6);
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>
